<template>
  <view class="checkbox" 
    :style="{
      backgroundColor: isChecked ? activeColor : '',
      borderColor:isChecked ? activeColor : ''
    }" @tap="handleClick">
    <text class="iconfont c-icon">&#xe8bf;</text>
  </view>
</template>

<script>
  export default {
    name: 'axq-checkbox',
    props: {
      // 形状，square为方形，circle为圆型
      shape: {
        type: String,
        default: 'circle'
      },
      // 整体的大小
      size: {
        type: [String, Number],
        default: '30rpx'
      },
      // 是否默认选中
      checked: {
        type: Boolean,
        default: false
      },
      // 选中状态下的颜色
      activeColor: {
        type: String,
        default: '#ff007f'
      },
    },
    data() {
      return {
        isChecked: false
      }
    },
    watch: {
      'checked': {
         handler:function(o,n){
           this.isChecked = this.checked
         },
         immediate: true
      }
    },
    created() {},
    methods: {
      handleClick() {
        this.isChecked = !this.isChecked
        this.$emit('change', this.isChecked)
      }
    }
  }
</script>

<style lang="less" scoped>
  .checkbox {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36rpx;
    height: 36rpx;
    background-color: #EAEAEA;
    border-radius: 50%;
    border: 1rpx solid #E8E8E8;
  

    .c-icon {
      font-size: 33rpx;
      color: #fff;
      text-align: center;
      border-radius: 50%;
    }
  }
</style>